ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್: ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ 16.6 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು ಅಥವಾ ಕೋಡ್ ಡೌನ್‌ಲೋಡ್ ಆಗಲು ಕಾಯುತ್ತಿರುವಾಗ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು "ತಡೆಹಿಡಿಯಲು" (suspend) ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿಭಾಯಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ಘೋಷಣಾತ್ಮಕ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನ ಪರಿಕಲ್ಪನೆಗಳು, ಅದರ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಅದನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದರ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳ ಮೂಲಕ ಕರೆದೊಯ್ಯುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಎಂದರೇನು?

ಸಸ್ಪೆನ್ಸ್ ಎನ್ನುವುದು ಇತರ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯುವ ಒಂದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ ಮತ್ತು ಆ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಪ್ರಾಮಿಸ್ (promise) ಪರಿಹರಿಸಲು ಕಾಯುತ್ತಿರುವಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ UI (ಉದಾಹರಣೆಗೆ, ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್) ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಪ್ರಾಮಿಸ್ ಇದಕ್ಕೆ ಸಂಬಂಧಿಸಿರಬಹುದು:

• ಡೇಟಾ ಫೆಚಿಂಗ್: API ನಿಂದ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲು ಕಾಯುವುದು.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್‌ಗಳು ಡೌನ್‌ಲೋಡ್ ಆಗಲು ಮತ್ತು ಪಾರ್ಸ್ ಆಗಲು ಕಾಯುವುದು.

ಸಸ್ಪೆನ್ಸ್‌ಗಿಂತ ಮೊದಲು, ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಕೀರ್ಣ ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್ ಮತ್ತು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳ ಹಸ್ತಚಾಲಿತ ನಿರ್ವಹಣೆಯನ್ನು ಒಳಗೊಂಡಿತ್ತು. ಸಸ್ಪೆನ್ಸ್ ಘೋಷಣಾತ್ಮಕ ವಿಧಾನವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛ ಮತ್ತು ಹೆಚ್ಚು ನಿರ್ವಹಣಾತ್ಮಕವಾಗಿಸುತ್ತದೆ.

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು

• ಸಸ್ಪೆನ್ಸ್ ಕಾಂಪೊನೆಂಟ್: <Suspense> ಕಾಂಪೊನೆಂಟ್ ಸ್ವತಃ. ಇದು fallback ಎಂಬ ಪ್ರಾಪ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಇದು ಸುತ್ತುವರಿದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಡೆಹಿಡಿಯುತ್ತಿರುವಾಗ ಪ್ರದರ್ಶಿಸಬೇಕಾದ UI ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• React.lazy(): ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡುವ ಮೂಲಕ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಒಂದು ಫಂಕ್ಷನ್. ಇದು ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆದಾಗ ಪರಿಹಾರವಾಗುವ Promise ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• ಪ್ರಾಮಿಸ್ ಇಂಟಿಗ್ರೇಷನ್: ಸಸ್ಪೆನ್ಸ್ ಪ್ರಾಮಿಸ್‌ಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಇನ್ನೂ ಪರಿಹಾರವಾಗದ ಪ್ರಾಮಿಸ್‌ನಿಂದ ಡೇಟಾವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದಾಗ, ಅದು "ತಡೆಹಿಡಿಯುತ್ತದೆ" ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

1. ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್

ಸಸ್ಪೆನ್ಸ್‌ನ ಪ್ರಾಥಮಿಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಲ್ಲಿ ಡೇಟಾ ಫೆಚಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಒಂದಾಗಿದೆ. ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುವ ಬದಲು, ಡೇಟಾ ಬರುವವರೆಗೆ ಕಾಯುತ್ತಿರುವಾಗ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಘೋಷಣಾತ್ಮಕವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ನೀವು ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಉದಾಹರಣೆ: API ನಿಂದ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದು

ನೀವು API ನಿಂದ ಪಡೆದ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾಂಪೊನೆಂಟ್ ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಸಸ್ಪೆನ್ಸ್ ಇಲ್ಲದೆ, ನೀವು ಈ ರೀತಿಯ ಕೋಡ್ ಹೊಂದಿರಬಹುದು:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

ಈ ಕೋಡ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಇದು ಬಹು ಸ್ಥಿತಿ ವೇರಿಯಬಲ್‌ಗಳನ್ನು (isLoading, error, user) ಮತ್ತು ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್ ತರ್ಕವನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ, ನೀವು SWR ಅಥವಾ TanStack Query (ಹಿಂದೆ ರಿಯಾಕ್ಟ್ ಕ್ವೆರಿ) ನಂತಹ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ಇದನ್ನು ಸರಳಗೊಳಿಸಬಹುದು, ಇವು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

SWR ಅನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ನೀವು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ನಾವು useSWR ಅನ್ನು ಬಳಸುತ್ತೇವೆ. suspense: true ಆಯ್ಕೆಯು ಡೇಟಾ ಇನ್ನೂ ಲಭ್ಯವಿಲ್ಲದಿದ್ದರೆ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಥ್ರೋ ಮಾಡಲು SWR ಗೆ ಹೇಳುತ್ತದೆ.
• UserProfile ಕಾಂಪೊನೆಂಟ್ ಲೋಡಿಂಗ್ ಅಥವಾ ದೋಷ ಸ್ಥಿತಿಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ಅದು ಲಭ್ಯವಾದಾಗ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಸರಳವಾಗಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• <Suspense> ಕಾಂಪೊನೆಂಟ್ SWR ನಿಂದ ಥ್ರೋ ಆದ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹಿಡಿಯುತ್ತದೆ ಮತ್ತು ಡೇಟಾ ಪಡೆಯುತ್ತಿರುವಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ UI (<p>Loading user data...</p>) ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ತರ್ಕವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾ ಫೆಚಿಂಗ್ ಬಗ್ಗೆ ತರ್ಕಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು:

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿ: ವಿವಿಧ ಭೌಗೋಳಿಕ ಸ್ಥಳಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯನ್ನು ಅನುಭವಿಸಬಹುದು. ದೂರದ ಸರ್ವರ್‌ಗಳಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯುವಾಗ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಮೂಲಕ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಸಸ್ಪೆನ್ಸ್ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರದಲ್ಲಿ ಕ್ಯಾಶ್ ಮಾಡಲು ಕಂಟೆಂಟ್ ಡೆಲಿವರಿ ನೆಟ್‌ವರ್ಕ್ (CDN) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಡೇಟಾ ಸ್ಥಳೀಕರಣ: ನಿಮ್ಮ API ಡೇಟಾ ಸ್ಥಳೀಕರಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಇದು ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಭಾಷೆ ಮತ್ತು ಸ್ವರೂಪದಲ್ಲಿ ಡೇಟಾವನ್ನು ಒದಗಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• API ಲಭ್ಯತೆ: ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಪ್ರದೇಶಗಳಿಂದ ನಿಮ್ಮ API ಗಳ ಲಭ್ಯತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.

2. React.lazy() ಮತ್ತು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್

ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವ ತಂತ್ರವಾಗಿದ್ದು, ಅವಶ್ಯಕತೆಗೆ ಅನುಗುಣವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಗಣನೀಯವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಮತ್ತು ಸಂಕೀರ್ಣ ಯೋಜನೆಗಳಿಗೆ.

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ ಮಾಡಲು React.lazy() ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಬಳಸಿದಾಗ, ಕಾಂಪೊನೆಂಟ್ ಡೌನ್‌ಲೋಡ್ ಆಗಲು ಮತ್ತು ಪಾರ್ಸ್ ಆಗಲು ಕಾಯುತ್ತಿರುವಾಗ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಲೇಜಿ ಲೋಡಿಂಗ್ ಮಾಡುವುದು

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• OtherComponent ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು ನಾವು React.lazy() ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆದಾಗ ಪರಿಹಾರವಾಗುವ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• ನಾವು <OtherComponent /> ಅನ್ನು <Suspense> ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯುತ್ತೇವೆ ಮತ್ತು fallback ಪ್ರಾಪ್ ಅನ್ನು ಒದಗಿಸುತ್ತೇವೆ.
• OtherComponent ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ, ಫಾಲ್‌ಬ್ಯಾಕ್ UI (<p>Loading...</p>) ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆದ ನಂತರ, ಅದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.

ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ನ ಪ್ರಯೋಜನಗಳು:

• ಸುಧಾರಿತ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯ: ಆರಂಭಿಕ ವೀಕ್ಷಣೆಗೆ ಅಗತ್ಯವಾದ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸಂವಾದಾತ್ಮಕವಾಗಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯವನ್ನು ನೀವು ಕಡಿಮೆ ಮಾಡಬಹುದು.
• ಕಡಿಮೆಯಾದ ಬಂಡಲ್ ಗಾತ್ರ: ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್‌ನ ಒಟ್ಟಾರೆ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಕಡಿಮೆ-ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಸಂಪರ್ಕಗಳಲ್ಲಿ.
• ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವ: ವೇಗವಾದ ಆರಂಭಿಕ ಲೋಡ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕೋಡ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಸುಗಮ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಬಹುದು.

ಸುಧಾರಿತ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ತಂತ್ರಗಳು:

• ರೂಟ್-ಆಧಾರಿತ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರೂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ವಿಭಜಿಸಿ, ಇದರಿಂದ ಪ್ರತಿ ರೂಟ್ ಅದಕ್ಕೆ ಬೇಕಾದ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಇದನ್ನು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಂತಹ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಾಧಿಸಬಹುದು.
• ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್: ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸಿ, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಅಥವಾ ಅಪರೂಪವಾಗಿ ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ.
• ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳು: ಬಳಕೆದಾರರ ಸಂವಹನಗಳು ಅಥವಾ ಇತರ ಪರಿಸ್ಥಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಕೋಡ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಳಗೆ ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸಿ.

3. ಕನ್ಕರೆಂಟ್ ಮೋಡ್ ಮತ್ತು ಸಸ್ಪೆನ್ಸ್

ಸಸ್ಪೆನ್ಸ್ ರಿಯಾಕ್ಟ್‌ನ ಕನ್ಕರೆಂಟ್ ಮೋಡ್‌ಗೆ ಒಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ, ಇದು ರಿಯಾಕ್ಟ್ ಏಕಕಾಲದಲ್ಲಿ ಅನೇಕ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ. ಕನ್ಕರೆಂಟ್ ಮೋಡ್ ರಿಯಾಕ್ಟ್‌ಗೆ ಪ್ರಮುಖ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು, ದೀರ್ಘಕಾಲದ ಕಾರ್ಯಗಳನ್ನು ಅಡ್ಡಿಪಡಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ಪಂದನಶೀಲತೆಯನ್ನು ಸುಧಾರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಕನ್ಕರೆಂಟ್ ಮೋಡ್ ಮತ್ತು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ, ರಿಯಾಕ್ಟ್ ಹೀಗೆ ಮಾಡಬಹುದು:

• ಎಲ್ಲಾ ಡೇಟಾ ಲಭ್ಯವಾಗುವ ಮೊದಲು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ: ರಿಯಾಕ್ಟ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಕೆಲವು ಡೇಟಾ ಅವಲಂಬನೆಗಳು ಇನ್ನೂ ಪಡೆಯುತ್ತಿರುವಾಗಲೂ ಅದನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ಇದು ರಿಯಾಕ್ಟ್‌ಗೆ ಭಾಗಶಃ UI ಅನ್ನು ಬೇಗನೆ ತೋರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ರೆಂಡರಿಂಗ್ ಅನ್ನು ಅಡ್ಡಿಪಡಿಸಿ ಮತ್ತು ಪುನರಾರಂಭಿಸಿ: ರಿಯಾಕ್ಟ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುತ್ತಿರುವಾಗ ಹೆಚ್ಚಿನ-ಆದ್ಯತೆಯ ಅಪ್‌ಡೇಟ್ ಬಂದರೆ, ಅದು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಅಡ್ಡಿಪಡಿಸಬಹುದು, ಹೆಚ್ಚಿನ-ಆದ್ಯತೆಯ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿಭಾಯಿಸಬಹುದು ಮತ್ತು ನಂತರ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಪುನರಾರಂಭಿಸಬಹುದು.
• ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ: ಕನ್ಕರೆಂಟ್ ಮೋಡ್ ರಿಯಾಕ್ಟ್‌ಗೆ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದೆ ದೀರ್ಘಕಾಲದ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದು UI ಸ್ಪಂದಿಸದಂತೆ ತಡೆಯುತ್ತದೆ.

ಕನ್ಕರೆಂಟ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು, ನೀವು ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿ createRoot API ಅನ್ನು ಬಳಸಬಹುದು:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

ಸಸ್ಪೆನ್ಸ್ ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ: SWR ಅಥವಾ TanStack Query ನಂತಹ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಇವು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಈ ಲೈಬ್ರರಿಗಳು ಕ್ಯಾಶಿಂಗ್, ಸ್ವಯಂಚಾಲಿತ ಮರುಪ್ರಯತ್ನಗಳು ಮತ್ತು ದೋಷ ನಿರ್ವಹಣೆಯಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ನಿಮ್ಮ ಡೇಟಾ ಫೆಚಿಂಗ್ ತರ್ಕವನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.
• ಅರ್ಥಪೂರ್ಣ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಒದಗಿಸಿ: ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಏನಾದರೂ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂಬುದರ ಸ್ಪಷ್ಟ ಸೂಚನೆಯನ್ನು ಒದಗಿಸಬೇಕು. ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಮಾಹಿತಿಯುಕ್ತ ಲೋಡಿಂಗ್ ಅನುಭವವನ್ನು ರಚಿಸಲು ಸ್ಪಿನ್ನರ್‌ಗಳು, ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ಅಥವಾ ಸ್ಕೆಲಿಟನ್ ಲೋಡರ್‌ಗಳನ್ನು ಬಳಸಿ.
• ದೋಷಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸಿ: ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು.
• ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಬಳಸಿ. ದೊಡ್ಡ ಅಥವಾ ಅಪರೂಪವಾಗಿ ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸಿ.
• ನಿಮ್ಮ ಸಸ್ಪೆನ್ಸ್ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಸಸ್ಪೆನ್ಸ್ ಅನುಷ್ಠಾನವು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ದೋಷಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.

ಎರರ್ ಬೌಂಡರಿಗಳೊಂದಿಗೆ ದೋಷ ನಿರ್ವಹಣೆ

ಸಸ್ಪೆನ್ಸ್ *ಲೋಡಿಂಗ್* ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸಿದರೆ, ಎರರ್ ಬೌಂಡರಿಗಳು ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ *ದೋಷ* ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ. ಎರರ್ ಬೌಂಡರಿಗಳು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಅವು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸಂಪೂರ್ಣ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಕ್ರ್ಯಾಶ್ ಆಗುವ ಬದಲು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ.

ಎರರ್ ಬೌಂಡರಿಯ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಬಳಸಲು, ದೋಷವನ್ನು ಎಸೆಯಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ನ ಸುತ್ತಲೂ ಅದನ್ನು ಸುತ್ತಿ:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ದೋಷಗಳನ್ನು ಸರಾಗವಾಗಿ ನಿರ್ವಹಿಸುವ ದೃಢವಾದ ಮತ್ತು ಚೇತರಿಸಿಕೊಳ್ಳುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸಬಹುದು.

ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು

ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

• ಇ-ಕಾಮರ್ಸ್ ವೆಬ್‌ಸೈಟ್: ಉತ್ಪನ್ನದ ವಿವರಗಳು ಅಥವಾ ಚಿತ್ರಗಳನ್ನು ಪಡೆಯುವಾಗ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಸ್ಪೆನ್ಸ್ ಬಳಸಿ. ಇದು ಡೇಟಾ ಲೋಡ್ ಆಗಲು ಕಾಯುತ್ತಿರುವಾಗ ಬಳಕೆದಾರರು ಖಾಲಿ ಪುಟವನ್ನು ನೋಡುವುದನ್ನು ತಡೆಯಬಹುದು.
• ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್: ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ಕಾಮೆಂಟ್‌ಗಳು ಅಥವಾ ಪೋಸ್ಟ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು ಸಸ್ಪೆನ್ಸ್ ಬಳಸಿ. ಇದು ಪುಟದ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಕಾದ ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.
• ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್: ಚಾರ್ಟ್‌ಗಳು ಅಥವಾ ಗ್ರಾಫ್‌ಗಳಿಗಾಗಿ ಡೇಟಾವನ್ನು ಪಡೆಯುವಾಗ ಲೋಡಿಂಗ್ ಸೂಚಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಸ್ಪೆನ್ಸ್ ಬಳಸಿ. ಇದು ಸುಗಮ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಅಂತರರಾಷ್ಟ್ರೀಯ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್

ಜಾಗತಿಕವಾಗಿ ಉತ್ಪನ್ನಗಳನ್ನು ಮಾರಾಟ ಮಾಡುವ ಅಂತರರಾಷ್ಟ್ರೀಯ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಸಸ್ಪೆನ್ಸ್ ಮತ್ತು React.lazy() ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು:

• ಉತ್ಪನ್ನದ ಚಿತ್ರಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಿ: ಉತ್ಪನ್ನದ ಚಿತ್ರಗಳು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಗೋಚರಿಸಿದಾಗ ಮಾತ್ರ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು React.lazy() ಬಳಸಿ. ಇದು ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಪುಟದ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಗಣನೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು. ನಿಜವಾದ ಚಿತ್ರ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಪ್ರತಿ ಲೇಜಿ-ಲೋಡೆಡ್ ಚಿತ್ರವನ್ನು <Suspense fallback={<img src="placeholder.png" alt="Loading..." />}> ನೊಂದಿಗೆ ಸುತ್ತಿ.
• ದೇಶ-ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ ಮಾಡಿ: ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ದೇಶ-ನಿರ್ದಿಷ್ಟ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ (ಉದಾ., ಕರೆನ್ಸಿ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ವಿಳಾಸ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳು), ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ದೇಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಮಾತ್ರ ಈ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು React.lazy() ಬಳಸಿ.
• ಸ್ಥಳೀಕರಿಸಿದ ಉತ್ಪನ್ನ ವಿವರಣೆಗಳನ್ನು ಪಡೆಯಿರಿ: ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಭಾಷೆಯಲ್ಲಿ ಉತ್ಪನ್ನ ವಿವರಣೆಗಳನ್ನು ಪಡೆಯಲು SWR ನಂತಹ ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಸಸ್ಪೆನ್ಸ್‌ನೊಂದಿಗೆ ಬಳಸಿ. ಸ್ಥಳೀಕರಿಸಿದ ವಿವರಣೆಗಳು ಪಡೆಯುತ್ತಿರುವಾಗ ಲೋಡಿಂಗ್ ಸೂಚಕವನ್ನು ಪ್ರದರ್ಶಿಸಿ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಗಣನೀಯವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಘೋಷಣಾತ್ಮಕ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಸಸ್ಪೆನ್ಸ್ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಅಸಿಂಕ್ರೊನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳ ಬಗ್ಗೆ ತರ್ಕಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ನೀವು ಸಣ್ಣ ವೈಯಕ್ತಿಕ ಯೋಜನೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ ಅಥವಾ ದೊಡ್ಡ ಎಂಟರ್‌ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, ಸುಗಮ, ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ಮತ್ತು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು ಸಸ್ಪೆನ್ಸ್ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಡೇಟಾ ಫೆಚಿಂಗ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ರಿಯಾಕ್ಟ್‌ನ ಕನ್ಕರೆಂಟ್ ಮೋಡ್‌ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಜವಾಗಿಯೂ ಆಧುನಿಕ ಮತ್ತು ಆಕರ್ಷಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಸಸ್ಪೆನ್ಸ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಕೊಂಡೊಯ್ಯಿರಿ.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

• ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• SWR ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• TanStack Query ಡಾಕ್ಯುಮೆಂಟೇಶನ್
• ರಿಯಾಕ್ಟ್ 18 ಪ್ರಕಟಣೆ (ಕನ್ಕರೆಂಟ್ ಮೋಡ್)